require(["config"],function(){
  require(["jquery","template","loadHF","cookie", "fly", "zoom"],function($,templat){


    
    // load other  必须放在loadhf前面，因为要先加载出DOM才能渲染效果
      function List(){
          this.init();
      }
      List.prototype = {
        constructor: List,
          init(){


            $.cookie.json = true;
            let search = $.cookie("search") || [];
            console.log("sear------");
            console.log(search);

              if (search.length!=0){
                const data = {products: search};
                const html1 = templat("list-template",data);
                $(".list-pro").html(html1)
                // 删除cookie
                // $.cookie("search", "", { expires: -1 , path: "/"});
                $.cookie("search", [], {  path: "/"});


              }
           
             else if (search.length==0){
              console.log("seach缓存为null  ，加载页面");
              this.loadList();
             }
              
            //  this.loadList();


              // this.loadList();
              //this.addHref();
              this.addListener();
          },
          loadList(){
            let taget=0;
              console.log("list假数据渲染");
              
              $.get("http://rap2api.taobao.org/app/mock/124172/list",(res)=>{
                  console.dir(res.res_body.data);
                      const redata =res.res_body.data.slice(0,35) 
                      const data = {products:redata};
                      const html = templat("list-template",data);
                       $(".list-pro").html(html)
             

// 销量排序
           $("#xiaoliang").on("click", function(){
             if(taget==0){
              res.res_body.data.sort(function(a,b){
                return a.hot-b.hot
              })
              console.dir("显示排序后res");
              console.dir(res.res_body.data);
              const redata =res.res_body.data.slice(0,35) 
              const data = {products:redata};
              const html = templat("list-template",data);
               $(".list-pro").html(html)
               $("#xiaoliang span").addClass("xuanzhuan")
               taget=1;
             }
             else if(taget==1){
              res.res_body.data.sort(function(a,b){
                return b.hot-a.hot
              })
              console.dir("显示排序后res");
              console.dir(res.res_body.data);
              const redata =res.res_body.data.slice(0,35) 
              const data = {products:redata};
              const html = templat("list-template",data);
               $(".list-pro").html(html)
               $("#xiaoliang span").removeClass("xuanzhuan")
               taget=0;
             }
            
              
           })

// ID排序
           $(".now").on("click", function(){
            res.res_body.data.sort(function(a,b){

              return a.id-b.id
            })
            console.dir("显示排序后res");
            console.dir(res.res_body.data);
             
            
            const redata =res.res_body.data.slice(0,35) 
            const data = {products:redata};
            const html = templat("list-template",data);
             $(".list-pro").html(html)

           })


// 价格排序
           $("#priceup").on("click", function(){
            res.res_body.data.sort(function(a,b){

              return a.price-b.price
            })
            console.dir("显示排序后res");
            console.dir(res.res_body.data)
            const redata =res.res_body.data.slice(0,35) ;
            const data = {products:redata};
            const html = templat("list-template",data);
             $(".list-pro").html(html)
           })

// 价格排序
           $("#pricedown").on("click", function(){
            res.res_body.data.sort(function(a,b){

              return b.price-a.price
            })
            console.dir("显示排序后res");
            console.dir(res.res_body.data)
            const redata =res.res_body.data.slice(0,35) 
            const data = {products:redata};
            const html = templat("list-template",data);
             $(".list-pro").html(html)
           })

                
              // $("#demo2 li").on("click",(enent)=>{
                $("#demo2").on("click",function(enent ){
                  
               var shuzi= $(enent.target).text()
                var shuzishangyige= $("#demo2-text").text()
                
                  if(shuzi=="下一页"){
                    console.log("xiage")
                  shuzishangyige++
                   shuzi= shuzishangyige
                  }
                  else if(shuzi=="上一页"){
                   shuzishangyige--
                    shuzi=shuzishangyige
                  }
                    console.log("显示页数")
                    console.log(shuzi)
                    
                    const redata =res.res_body.data.slice(35*(shuzi-1),35*(shuzi)) 
                    
                    console.log(redata);   
                   const data = {products:redata};
                  const html = templat("list-template",data);
                     
                  $(".list-pro").html(html)
            
                  })
              })
          },
          // addHref(){
          //     $(".det").attr(href,"/html/detail.html");
          //     console.log($(".det").attr(href));
          // }
     // 注册事件监听
			addListener() {
        $(".list-pro").on("click", ".add_cart", this.addToCartHandler)
        // $("#xiaoling").on("click", this.sort)

        $(".sea_submit").on("click", this.search)
      },




search(){

  var show=$(".sea_input").val()
  console.log("出来吧皮卡丘")
  console.log( $(".sea_input").val())
  $.get("http://rap2api.taobao.org/app/mock/124172/list",(res)=>{
    console.dir(res.res_body.data);
  
     var admins=[];
    
      res.res_body.data.map(function (track) {
          
          if(track.title.indexOf(show) != -1){
              admins.push(track);
             
          }
          
       })
       console.dir(admins);
       const data = {products: admins};
          const html1 = templat("list-template",data);
           $(".list-pro").html(html1)
   })

},

   









      
			// 处理添加到购物车
			addToCartHandler(event) {
				// 当前点击按钮的父元素
				const $parent = $(event.target).parents("li.yi")
        console.log(event.target);
        console.log($parent);
        
				// 获取当前选购商品的信息
				const currProd = {
          id: $parent.data("id"),
          // id: $parent.find(".pro-id").text(),
					title: $parent.find(".text").text(),
					img: $parent.find("img").attr("src"),
					price: $parent.find(".price").text(),
					amount: 1
        }
        console.log("currProd")
        console.log(currProd);
				// 读取cookie中保存的已有购物车
				$.cookie.json = true;
				const cart = $.cookie("cart") || []
				// 判断购物车是否已保存了当前选购商品
				const has = cart.some(curr => {
					if (curr.id == currProd.id) { // 存在，则数量递增
						curr.amount++;
						return true
					}
					return false
				})
				// 如果不存在，则添加到数组中
				if(!has)
					cart.push(currProd)
				// 将购物车保存到cookie中
        $.cookie("cart", cart, {expires: 7, path: "/"})
        

        //改变侧边栏数量
        console.log($("#sidebarcartnum").text())
        let num = 0;
        cart.some(curr=>{
            num += Number(curr.amount);
        });
        console.log("数量---"+num);
        $("#sidebarcartnum").text(num);
        console.log( $("#sidebarcartnum"));

				// 添加抛物线效果
				const _end = $(".sb_cart").offset();
				const flyer = $(`<img src="${currProd.img}" style="width:40px; height: 40px;">`);
				flyer.fly({
					start: {
						left: event.pageX - $(window).scrollLeft(),
						top: event.pageY - $(window).scrollTop()
					},
					end: {
						left: _end.left - $(window).scrollLeft(),
						top: _end.top - $(window).scrollTop()
					},
					onEnd: function() {
						this.destroy();
					}
				});
			}
		}

		new List();
	})
})



window.onload=function(){
  $(".he-nav-bd").on("mouseover",() => {
  
    $(".he-nav-bd .main_cate_l")[0].style.display="block"
    
  })
  $(".he-nav-bd").on("mouseout",() => {
    
    $(".he-nav-bd .main_cate_l")[0].style.display="none"
    
  })
}